<template>
  <div class="page">
    <div class="task-list">
      <div class="task-header">
        <a-row>
          <a-col :span="18">
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item label="" style="margin-left: 10px">
                  <a-input v-model:value="formState.name" placeholder="支持按照文件名称进行搜索" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-button type="primary">搜索</a-button>
                <a-button style="margin-left: 10px">重置</a-button>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="6" style="text-align: right">
            <a-button style="margin-left: 10px" type="primary" @click="uploadFiles">
              上传文件
            </a-button>
          </a-col>
        </a-row>
      </div>
      <div class="task-table">
        <a-table
          :columns="columns"
          :data-source="data"
          :pagination="{
            total: 20,
            showTotal: (total, range) => `共 ${total} 条数据`
          }"
        >
          <template #a="{ index }">
            <span>{{ index + 1 }}</span>
          </template>
          <template #c="{ text }">
            <span>{{ text }}</span>
          </template>
          <template #d="{ text }">
            <span>{{ text }}</span>
          </template>
          <template #f="{ text }">
            <span>{{ text }}</span>
          </template>
          <template #active="{ record }">
            <a-popconfirm
              title="确定删除当前这个指标?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="confirmDelete(record)"
              @cancel="cancelDelete"
            >
              <a-button type="primary" shape="circle" size="small">
                <template #icon>
                  <DeleteOutlined />
                </template>
              </a-button>
            </a-popconfirm>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { DeleteOutlined } from "@ant-design/icons-vue";
import { defineComponent, reactive } from "vue";
// import { Moment } from "moment";
import { TableDataType } from "@/shims/globe";
import { columns } from "./config";

export default defineComponent({
  components: {
    DeleteOutlined
  },
  setup() {
    const formState = reactive({
      name: ""
    });

    const uploadFiles = () => {
      console.log("***");
    };

    const data: TableDataType[] = [
      {
        key: "1",
        b: "上传人群1",
        c: "200k",
        d: "MD5算法",
        f: "2021-08-30 18:11:34",
        g: "2021-08-30 18:11:34"
      },
      {
        key: "2",
        b: "上传人群2",
        c: "6.3M",
        d: "MD5算法",
        f: "2021-08-30 18:11:34",
        g: "2021-08-30 18:11:34"
      },
      {
        key: "3",
        b: "上传人群3",
        c: "800k",
        d: "MD5算法",
        f: "2021-08-30 18:11:34",
        g: "2021-08-30 18:11:34"
      }
    ];

    const confirmDelete = (record: any) => {
      console.log(record);
    };
    const cancelDelete = () => {
      console.log("取消");
    };

    return {
      formState,
      data,
      columns,
      uploadFiles,
      confirmDelete,
      cancelDelete
    };
  }
});
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
